<!DOCTYPE html>
<html lang="en" class="no-forced-scrollbar">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style>
      @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      /**
        * Light color scheme for splashscreen
        *
      */

      .light {
        background: linear-gradient(
          280deg,
          #4f5b62,
          #62727b,
          #718792,
          #819ca9,
          #8eacbb
        );
      }

      /**
        * Dark color scheme for splashscreen
        *
      */

      .dark {
        background: linear-gradient(
          280deg,
          #111827,
          #1c2741,
          #332d41,
          #4a2532,
          #381e73,
          #244415
        );
      }

      @media (prefers-reduced-motion) {
        .animation {
          animation: gradient 30s linear infinite;
        }
      }

      .splashBackground {
        position: absolute;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background-size: 400% 400%;
        animation: gradient 2s linear infinite;
        z-index: 99999999;
      }

      .splashLogo {
        width: 30%;
        height: 30%;
        /* This file is in the 'public' folder, so it will be placed at the root when the client is built */
        background-image: url(/icon.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
      }

      /* Class to apply when the load process is finished */
      .loadFinished {
        opacity: 0;
        transition: opacity 0.75s linear;
      }
    </style>
    <script type="module" src="src/splashscreen.ts"></script>
    <script type="module" src="src/main.ts"></script>
    <title>Jellyfin Vue</title>
  </head>
  <body>
    <div class="splashBackground">
      <div class="splashLogo"></div>
    </div>
    <div id="app"></div>
  </body>
</html>
